<template>
  <HomeHead />

  <div class="home-container">
    <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
      <!-- 轮播 -->
      <van-swipe class="home-banner" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="banner in banners" :key="banner.id">
          <img :src="banner.picUrl" alt="" />
        </van-swipe-item>
      </van-swipe>
      <!-- /轮播 -->
      <!-- 宫格导航 -->
      <van-grid clickable>
        <van-grid-item
          v-for="cate in cates"
          :key="cate.id"
          :icon="cate.icon"
          :text="cate.name"
          :to="{
            path: '/itemLists',
            query: {
              cateId: cate.id,
            },
          }"
        />
      </van-grid>
      <!-- /宫格导航 -->
      <!-- 推荐商品 -->
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="--我也是有底线的--"
        @load="reachBottom"
        :immediate-check="false"
      >
        <ItemLists :items="items" @addCart="addItemToCart" />
      </van-list>
      <!-- /推荐商品 -->
    </van-pull-refresh>
  </div>

  <CommonTabbar />
</template>

<script setup lang="ts" name="HomePage">
import { ref, onMounted } from "vue";
import CommonTabbar from "@/components/CommonTabbar.vue";
import HomeHead from "./components/HomeHead.vue";
import ItemLists from "./components/ItemLists.vue";
import type { Banner, Cate, Item } from "@/types/homeType";
import { getHomeBanner, getCates, getItems } from "@a/home";
import useCartStore from "@s/cart";
const cartStore = useCartStore();
// 点击列表商品加入购物车图标
const addItemToCart = (goodsId: number) => {
  cartStore.addCart({
    goodsId,
    number: 1,
  });
};

// 首页轮播数据
const banners = ref<Banner[]>([]);
const fetchBanner = () => {
  getHomeBanner().then((res) => {
    if (res.data.code === 0) {
      banners.value = res.data.data;
    }
  });
};
// 宫格导航数据
const cates = ref<Cate[]>([]);
const fetchCates = () => {
  getCates().then((res) => {
    if (res.data.code === 0) {
      cates.value = res.data.data;
    }
  });
};

// 首页推荐商品列表
const items = ref<Item[]>([]);
let page = 1;
const pageSize = 5;
// 商品列表 上拉加载的参数
const loading = ref(false); // 是否处理正在加载下一页状态
const finished = ref(false); // 是否已经没有数据更多数据了
// 下拉触底
const reachBottom = () => {
  page++;
  fetchItems();
};
// 首页下拉刷新
const pullLoading = ref(false);
const onRefresh = () => {
  // 清除上拉状态 重新请求列表
  page = 1;
  finished.value = false;
  items.value = [];
  fetchItems();
};
const fetchItems = () => {
  getItems({
    page,
    pageSize,
  }).then((res) => {
    loading.value = false; // 将上拉加载loading解除
    pullLoading.value = false;
    if (res.data.code === 0) {
      items.value = [...items.value, ...res.data.data.result];
    }
    if (res.data.code === 700) {
      // 已经没有更多数据了
      finished.value = true;
    }
  });
};
onMounted(() => {
  fetchBanner();
  fetchCates();
  fetchItems();
});
</script>

<style scoped lang="scss">
.home-container {
  padding-top: 40px;
  padding-bottom: 50px;
  .home-banner {
    width: 10rem;
    height: 5rem;
    img {
      width: 10rem;
      height: 5rem;
    }
  }
}
</style>
